<template>
  <div class="mainua">
    <div class="main_spac1" style="padding-bottom:5px;">
      <div class="main_white padding10">
        <div class="main_crumbs boxdq">
          <div class="main_crumbs_l">
            <a href="javascript:;" @click="$router.back(-1)">
              <i class="el-icon-arrow-down"></i>返回
            </a>
            <em>|</em>
            <span>{{ titleName }}</span>
          </div>
        </div>
        <div class="main_tile boxdq marginTop10">
          <div class="main_tile_l"></div>
        </div>
        <div class="maincla_form">
          <el-form
            inline
            :model="form"
            :rules="rules"
            class="demo-form-inline"
            ref="form"
            label-width="110px"
          >
            <el-form-item label="产品类型">
              <!-- <el-input disabled :value="form.type==1?'批发':'城配'"></el-input> -->
              <el-select
                disabled
                v-model="type"
                placeholder="客户类型"
              >
                <el-option
                  v-for="item in userType"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <div class="clearfix"></div>

            <el-form-item label="上级菜单">
              <el-select
                v-model="firstId"
                placeholder="一级菜单"
                @change="selectAction($event, 'firstId')"
              >
                <el-option
                  v-for="item in firstList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select
                v-model="secondId"
                placeholder="二级菜单"
                @change="selectAction($event, 'secondId')"
              >
                <el-option
                  v-for="item in secondList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-select
                v-model="thiredId"
                placeholder="三级菜单"
                @change="selectAction($event, 'thiredId')"
              >
                <el-option
                  v-for="item in thiredList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <div class="clearfix"></div>
            <el-form-item label="菜单名称" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>

            <el-form-item label="控制器" prop="controller">
              <el-input v-model="form.controller"></el-input>
            </el-form-item>

            <div class="clearfix"></div>

            <el-form-item label="方法" prop="action">
              <el-input v-model="form.action"></el-input>
            </el-form-item>

            <el-form-item label="路由" prop="route">
              <el-input v-model="form.route"></el-input>
            </el-form-item>

            <div class="clearfix"></div>

            <el-form-item label="排序" prop="ordid">
              <el-input v-model="form.ordid"></el-input>
            </el-form-item>

            <el-form-item label="显示">
              <el-switch
                v-model="form.display"
                :active-value="1"
                :inactive-value="0"
                active-color="#03A98E"
              >
              </el-switch>
            </el-form-item>

            <el-form-item label="后台菜单显示">
              <el-switch
                v-model="form.front_end_show"
                :active-value="1"
                :inactive-value="0"
                active-color="#03A98E"
              >
              </el-switch>
            </el-form-item>

            <div class="clearfix"></div>

            <el-form-item>
              <div class="btns">
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <el-button @click="$router.back()">取消</el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { menuType } from "@/api/user/userMenu";
import {
  menuListByPid,
  addMenu,
  getMenuDetail,
  editMenu
} from "@/api/user/userMenu";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
export default {
  data() {
    var checkOrdid = (rule, value, callback) => {
      if (value > 100) {
        return callback(new Error("排序数值过大"));
      } else {
        callback();
      }
    };
    return {
      titleName: "",
      firstList: [],
      secondList: [],
      thiredList: [],
      firstId: "",
      secondId: "",
      thiredId: "",
      form: {
        pid: "",
        name: "",
        controller: "",
        route: "",
        ordid: 100, //排序
        display: 1,
        action: "", //方法
        type: "",
        front_end_show: 1,
      },
      type:"",
      detail: null, //储存编辑的详情
      rules: {
        name: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
        // controller: [{ required: true, message: '请输入控制器', trigger: 'blur' },],
        // action: [{ required: true, message: '请输入方法', trigger: 'blur' },],
        // route: [{ required: true, message: '请输入路由', trigger: 'blur' },],
        ordid: [
          // { required: true, message: '请输入排序', trigger: 'blur' },
          { validator: checkOrdid, trigger: "blur" }
        ]
      },
      userType: []
    };
  },
  mounted() {
    var id = this.$route.query.id;
    var type = this.$route.query.type;
    this.form.type = Number(type);
    if (id) {
      this.titleName = "编辑菜单";
      this.getDetail(id);
    } else {
      this.titleName = "新增菜单";
      this.getSelectList("0", 1);
    }
    this.getUserType();
  },
  methods: {
    // //获取客户类型
    getUserType() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          )
        },
        apiUrl().name
      );
      menuType(data).then(res => {
        this.listLoading = false;
        if (res.errcode == 0) {
          this.userType = res.data;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    //获取菜单列表
    getSelectList(pid, lv) {
      if (pid) {
        let data = Object.assign(
          {
            sign: Md5(
              objKeySort(Object.assign(apiUrl().name), {
                pid,
                type: this.form.type
              }) + apiUrl().appsecret
            )
          },
          apiUrl().name,
          { pid, type: this.form.type }
        );
        menuListByPid(data).then(res => {
          if (res.errcode == 0) {
            if (lv == 1) {
              this.form.display = 1;
              this.firstList = res.data.list;
            } else if (lv == 2) {
              this.form.display = 1;
              this.secondList = res.data.list;
            } else if (lv == 3) {
              this.form.display = 0;
              this.thiredList = res.data.list;
            }
          } else {
            this.$message.error(res.errmsg);
          }
        });
      }
    },
    //获取详情信息
    getDetail(id) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name), { id }) +
              apiUrl().appsecret
          )
        },
        apiUrl().name,
        { id }
      );
      getMenuDetail(data).then(res => {
        if (res.errcode == 0) {
          let data = res.data;
          this.detail = data;
          this.type = data.product.name;
          let form = this.form;
          form.name = data.name;
          form.action = data.action;
          form.controller = data.controller;
          form.display = data.display;
          form.route = data.route;
          form.ordid = data.ordid;
          form.id = data.id;
          form.front_end_show = data.front_end_show;
          // form.product = data.product;

          let list = data.p_menu_list;
          if (list.menu_list_1) {
            this.firstList = list.menu_list_1;
            this.firstId = data.active_pid[0];
          }
          if (list.menu_list_2) {
            this.secondList = list.menu_list_2;
            this.secondId = data.active_pid[1];
          }
          if (list.menu_list_3) {
            this.thiredList = list.menu_list_3;
            this.thiredId = data.active_pid[2];
          }
          console.log(this.detail);
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    selectAction(e, type) {
      if (type == "type") {
        this.form.type = e;
      } else {
        if (type == "firstId") {
          this.secondList = [];
          this.secondId = null;
          this.thiredList = [];
          this.thiredId = null;
          this.getSelectList(e, 2);
        } else if (type == "secondId") {
          this.getSelectList(e, 3);
        }
        this[type] = e;
      }
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.form.ordid == "" ? (this.form.ordid = 100) : "";
          if (this.$route.query.id) {
            //编辑
            var params = JSON.parse(JSON.stringify(this.form));
            var lv = this.thiredId
              ? this.thiredId
              : this.secondId
              ? this.secondId
              : this.firstId
              ? this.firstId
              : 0;
            params.pid = lv;
            let data = Object.assign(
              {
                sign: Md5(
                  objKeySort(Object.assign(apiUrl().name), params) +
                    apiUrl().appsecret
                )
              },
              apiUrl().name,
              params
            );
            editMenu(data).then(res => {
              if (res.errcode == 0) {
                this.$message({
                  message: "修改成功",
                  type: "success"
                });
                this.$router.back();
              } else {
                this.$message.error(res.errmsg);
              }
            });
          } else {
            //新增
            var params = JSON.parse(JSON.stringify(this.form));
            var lv = this.thiredId
              ? this.thiredId
              : this.secondId
              ? this.secondId
              : this.firstId
              ? this.firstId
              : 0;
            params.pid = lv;
            let data = Object.assign(
              {
                sign: Md5(
                  objKeySort(Object.assign(apiUrl().name), params) +
                    apiUrl().appsecret
                )
              },
              apiUrl().name,
              params
            );
            addMenu(data).then(res => {
              if (res.errcode == 0) {
                this.$message({
                  message: "新增成功",
                  type: "success"
                });
                this.$router.back();
              } else {
                this.$message.error(res.errmsg);
              }
            });
          }
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-form-item__content .el-input__inner {
  width: 200px;
}
.btns {
  margin: 20px 110px 0;
  button {
    margin-right: 10px;
  }
}
</style>
